<template>
	<view>
		<view style="padding: 30rpx 30rpx 10rpx 30rpx;">
			<u-alert-tips type="success" :show-icon='true' description="家人互相关联后可以在家庭页面查看家庭总账单哦"></u-alert-tips>
		</view>
		
		<view v-for="(item, index) in connList" :key="index">
			<view class="u-flex" style="margin: 10rpx 50rpx 10rpx 50rpx; border: 1px solid #2979FF; border-radius:25rpx">
				<view class="u-flex-2" style="padding: 20rpx 20rpx 20rpx 40rpx;">
					<u-avatar :src="item.img" size="100" style="border:3px solid #18b566"></u-avatar>
				</view>
				<view class="u-flex-6" style="padding: 0 0 0 20rpx">
					<view style="font-size: 40rpx; font-weight: bold;">{{item.connName}}</view>
					<view style="font-size: 25rpx; color: #909399; font-weight: bold;">{{item.connPhone}}</view>
				</view>
				<view class="u-flex-3" style="padding-right: 20rpx;">
					<u-tag v-show="item.status === 2" text="已关联" type="success" shape="circle"/>
					<u-tag v-show="item.status === 1" text="待同意" type="error"  shape="circle"/>
				</view>
				<view class="u-flex-1" style="padding-right: 30rpx;">
					<u-icon name="minus-circle" color="#ff0000" size="70" @click="toDel(item.id)"></u-icon>
				</view>
			</view>	
		</view>
		<view v-show="connList.length === 0" style="padding: 60rpx 0rpx 0rpx 0rpx;">
			<u-divider>您还没有关联家人，点击添加按钮来关联家人吧</u-divider>
		</view>
		
		<u-row gutter="16" style="padding: 60rpx 10rpx 60rpx 10rpx;" >
			<u-col span="2">
				<span>&nbsp;</span>
			</u-col>
			<u-col span="3">
				<u-button type="info" size="medium" @click="canel">返回</u-button>
			</u-col>
			<u-col span="2">
				<span>&nbsp;</span>
			</u-col>
			<u-col span="3">
				<u-button type="primary" size="medium" @click="show = true">添加</u-button>
			</u-col>
			<u-col span="2">
				<span>&nbsp;</span>
			</u-col>
		</u-row>
	
		<!-- 弹出框 -->
		<u-popup v-model="show" mode="bottom">
			<u-form label-width="150rpx" style="padding: 20rpx 20rpx 20rpx 50rpx;">
				<u-form-item label="家人帐号"><u-input v-model="connPhone" /></u-form-item>
				<u-form-item label="家人昵称"><u-input v-model="connName" /></u-form-item>
			</u-form>
			<u-row gutter="16" style="padding: 10rpx 10rpx 60rpx 10rpx;" >
				<u-col span="2">
					<span>&nbsp;</span>
				</u-col>
				<u-col span="3">
					<u-button type="info" size="medium" @click="show = false">取消</u-button>
				</u-col>
				<u-col span="2">
					<span>&nbsp;</span>
				</u-col>
				<u-col span="3">
					<u-button type="primary" size="medium" @click="add">确定</u-button>
				</u-col>
				<u-col span="2">
					<span>&nbsp;</span>
				</u-col>
			</u-row>
		</u-popup>
		<!-- 弹出框退出登录 -->
		<u-popup v-model="showDel" mode="bottom">
			<view style="padding: 30rpx 30rpx 10rpx 30rpx;">
				<u-alert-tips type="warning" :show-icon='true' description="确定要删除关联吗？"></u-alert-tips>
			</view>
			<u-row gutter="16" style="padding: 10rpx 10rpx 60rpx 10rpx;" >
				<u-col span="2">
					<span>&nbsp;</span>
				</u-col>
				<u-col span="3">
					<u-button type="error" size="medium" @click="doDel">删除</u-button>
				</u-col>
				<u-col span="2">
					<span>&nbsp;</span>
				</u-col>
				<u-col span="3">
					<u-button type="info" size="medium" @click="showDel = false">取消</u-button>
				</u-col>
				<u-col span="2">
					<span>&nbsp;</span>
				</u-col>
			</u-row>
		</u-popup>
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show : false,
				showDel : false,
				connPhone : "",
				connName : "",
				id : "",
			}
		},
		onShow() {
			this.sync();
		},
		methods:{
			// 返回我的页面
			canel(){
				this.$u.route({
					url : '/pages/my/index',
					type: "tab"
				})
			},
			// 添加
			add(){
				if(this.connPhone === null 
					|| this.connPhone === undefined
					|| this.connPhone === ""){
						this.$refs.uToast.show({
							title: '请输入帐号',
							type: 'error'
						});
						return;
					}
				if(this.connName === null
						|| this.connName === undefined
						|| this.connName === ""){
							this.$refs.uToast.show({
								title: '请输入昵称',
								type: 'error'
							});
							return;
						}
				if(this.myConfig.phone === this.connPhone){
					this.$refs.uToast.show({
						title: '不可以添加自己',
						type: 'error'
					});
					return;
				}
				this.connList.forEach(connItem =>{
					if(connItem.connPhone === this.connPhone){
						this.$refs.uToast.show({
							title: '已添加过该家人，请等待家人添加您',
							type: 'error'
						});
						return;
					}
				});
				this.$u.post('/ledger/memberconn/save', {
						"id": this.$u.guid(),
						"userId" : this.myConfig.userId,
						"connId" : "", 
						"connName" : this.connName, 
						"connPhone" : this.connPhone,
						"status" : 1,
					}).then(data => {
						if (data && data.code === 0) {
							this.$u.vuex('connList', data.connList);
							this.show = false;
							this.connName = "";
							this.connName = "";
						} else{
							this.$refs.uToast.show({
								title: data.msg,
								type: 'error'
							});
						}
					});
			},
			// 同步数据
			sync(){
				if(this.myConfig.userId === null 
					|| this.myConfig.userId === undefined
					|| this.myConfig.userId === ""){
						return;
					}
				this.$u.post('/ledger/memberconn/sync', {
						userId: this.myConfig.userId
					}).then(data => {
						if (data && data.code === 0) {
							this.$u.vuex('connList', data.connList);
						} 
					});
			},
			toDel(id){
				this.id = id;
				this.showDel = true;
			},
			doDel(){
				this.$u.post('/ledger/memberconn/delete', [this.id])
					.then(data => {
						if (data && data.code === 0) {
							this.sync();
							this.showDel = false;
						} else{
							this.$refs.uToast.show({
								title: data.msg,
								type: 'error'
							});
						}
					});
			}
		}
	}
</script>